<template>
  <div>
    <div class="top-info">
      <div class="title flex items-center"
        ><span>{{ item.processStep }}</span>
      </div>
      <div class="time">{{ item.inceptDate }} </div>
    </div>
    <div class="mid-info">
      <div class="name">{{ item.processUser }}</div>
      <div :class="['btn', getStatusClass(item.processState, 'processState')]">{{
        item.processStateName
      }}</div>
      <div class="time">
        <img :src="clock" />
        <span style="margin-right: 5px" v-if="setTimeData(item, item.processState)">{{
          setTimeData(item, item.processState)
        }}</span>
        <span v-if="item.wasteTime">
          （ 耗时
          <span style="color: #2b63a1; font-weight: bold">{{
            getTimeFormat(item.wasteTime)[0]
          }}</span>
          小时
          <span v-if="getTimeFormat(item.wasteTime).length > 1">
            <span style="color: #2b63a1; font-weight: bold">{{
              getTimeFormat(item.wasteTime)[1]
            }}</span>
            分</span
          >）
        </span>
        <Image class="ml-3.5" v-if="item.sign" width="72px" height="32px" :src="item.sign.url" />
      </div>
    </div>
    <div class="remark" v-if="item.processOpinion">
      <span class="label">审批意见：</span>
      <span>{{ item.processOpinion }}</span>
    </div>
    <!-- 征询  转批 传阅 -->
    <div :class="['read-over', !openFlag ? 'read-overflow' : '']">
      <div v-for="(ite, idx) in item.workItemTranResList" :key="idx" class="read-item">
        <div class="read-cont">
          <div class="btn default">{{ ite.operationTypeName }}</div>
          <!-- {{
            getTransferPerson(ite.workItemTranDetailResList)?.toString()
          }} -->
          <div class="read-remark" v-if="ite.workItemTranDetailResList.length">
            <span v-if="item.recipientID !== ite.userId"
              >{{ ite.userName }}
              <RightOutlined style="color: #999999" />
            </span>
            {{ getTransferPerson(ite.workItemTranDetailResList)?.toString() }}
          </div>
          <div class="read-time">{{ ite.transDate }}</div>
        </div>
        <div
          v-for="(it, ix) in ite.workItemTranDetailResList"
          :key="`${idx}_${ix}`"
          class="read-th"
        >
          <div class="mid-info mid-custom">
            <div class="name" style="color: #999999">{{ ite.operationTypeName }}描述：</div>
            <div class="time" style="color: #333; font-size: 14px">
              {{ ite.transComment || `未填写${ite.operationTypeName}内容` }}</div
            >
          </div>

          <div
            class="mid-info mid-custom"
            v-if="ite.operationType !== 2"
            style="background: #f8fafc"
          >
            <div class="name">{{ it.acceptName }}</div>
            <div :class="['btn', getStatusClass(it.transStatus, 'transStatus')]">{{
              it.transStatusName
            }}</div>
            <div class="time">
              <img :src="clock" v-if="it.wasteTime || it.readDate" />
              <span style="margin-right: 5px" v-if="it.readDate">{{ it.readDate }}</span>
              <span v-if="it.wasteTime">
                （ 耗时
                <span style="color: #2b63a1; font-weight: bold">{{
                  getTimeFormat(it.wasteTime)[0]
                }}</span>
                小时
                <span v-if="getTimeFormat(it.wasteTime).length > 1">
                  <span style="color: #2b63a1; font-weight: bold">{{
                    getTimeFormat(it.wasteTime)[1]
                  }}</span>
                  分</span
                >）
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- v-if="item.workItemTranResList.length > 3" -->
    <div @click="openFlag = !openFlag" class="read-open" v-if="item.workItemTranResList.length > 1">
      {{ openTitle }}
      <div class="open-icon" :style="{ transform: !openFlag ? 'rotate(180deg)' : '' }"
        ><UpOutlined style="font-size: 12px; color: #2b63a1" />
        <UpOutlined style="margin-top: -6px; font-size: 12px; color: #90adce"
      /></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { PropType, ref, computed } from 'vue';
  import clock from '/@/assets/images/clock.png';
  import { Image } from 'ant-design-vue';
  import { isArray } from 'min-dash';
  import { UpOutlined, RightOutlined } from '@ant-design/icons-vue';
  defineProps({
    item: Object as PropType<any>,
  });

  const openFlag = ref(false);

  const openTitle = computed<string>(() => (openFlag.value ? '收回' : '展开'));

  const getStatusClass = (status, key) => {
    // 外层标签颜色
    const processStateArr = [
      { key: [0], value: 'yellow' },
      { key: [2], value: 'blue' },
      { key: [3], value: 'green' },
      { key: [1, 5, 7], value: 'default' },
    ];

    //内层标签颜色
    const transStatusArr = [
      { key: [0], value: 'blue' },
      { key: [1, 2], value: 'default' },
    ];
    let color = 'default';

    const data = { processStateArr, transStatusArr };

    const findItem = data[`${key}Arr`].find((i) => i.key.includes(status));
    if (findItem) {
      color = findItem.value;
    }
    return color;
  };
  // 提取耗时时分
  const getTimeFormat = (time: string): string[] => {
    if (!time) return [];
    const timeArr = time.match(/\d+(.\d+)?/g);
    console.log('%c===', 'color:#f7a;font-size:30px;font-weight:bold', timeArr);
    return timeArr || [];
  };

  // 设置时间字段
  const setTimeData = (item: object, status: number) => {
    // const dateText = [
    //   { key: [1], value: 'readDate' }, //阅读时间
    //   { key: [0, 3], value: 'finishedDate' }, //处理时间
    //   { key: [5], value: 'callDate' }, //撤回时间
    // ];
    // const findItem = dateText.find((i) => i.key.includes(status));
    // let str = '';
    // if (findItem) {
    //   str = item[findItem.value];
    // }

    // return str;

    const dataText = new Map([
      [3, 'finishedDate'],
      [5, 'callDate'],
    ]);

    return dataText.get(status) && item[dataText.get(status)!];
  };

  // 提取转批人员
  const getTransferPerson = (data: any[]) => {
    if (!isArray(data)) return;
    return data.map((i) => i.acceptName);
  };
</script>

<style lang="less" scoped>
  .item {
    margin-bottom: 32px;
  }

  .time {
    color: #999999;
  }

  .top-info {
    display: flex;
    justify-content: space-between;
    font-family: PingFang SC-Semibold, PingFang SC;

    .title {
      font-weight: 600;
      color: #333333;
    }
  }

  .mid-info {
    margin: 13px 0;
    display: flex;
    align-items: center;

    img {
      width: 18px;
    }

    .time {
      display: flex;
      align-items: center;
      color: #999999;
      margin: 0 16px 0 6px;

      img {
        margin-right: 6px;
      }
    }

    .name {
      color: #333333;
    }
  }

  .mid-custom {
    margin: 0;
    background: #f8fafc;
    padding: 13px 16px;
    margin-bottom: 12px;
  }

  .btn {
    min-width: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    color: #666;
    background: rgba(77, 184, 3, 0.05);
    padding: 2px 7px;
  }

  .default {
    background: #ebedf0;
    color: #333;
  }

  .green {
    background: rgba(77, 184, 3, 0.05);
    color: rgba(77, 184, 3, 1);
  }

  .blue {
    background: rgba(43, 99, 161, 0.05);
    color: rgba(43, 99, 161, 1);
  }

  .yellow {
    background: rgba(252, 124, 34, 0.05);
    color: rgba(252, 124, 34, 1);
  }

  .remark {
    padding: 14px;
    width: 100%;
    background: rgba(43, 99, 161, 0.05);
    border-radius: 2px 2px 2px 2px;

    .label {
      color: #999999;
    }
  }

  // 转批
  .read-over {
    max-height: 300px;
    transition: all 0.5s ease-in-out;
    overflow-y: auto;

    .read-item {
      border: 1px solid #f5f6f7;
      margin-bottom: 16px;
      border-radius: 2px;
      padding-bottom: 0.1px;
    }

    .read-cont {
      padding: 8px 16px;
      border-bottom: 1px solid #f5f6f7;
      display: flex;
      align-items: center;

      .read-remark {
        margin-left: 12px;
        max-width: 65%;
      }

      .read-time {
        font-size: 14px;
        color: #333;
        margin-left: auto;
      }
    }

    .read-th {
      // background: #f8fafc;
      width: calc(100% - 32px);
      margin: 16px auto;
    }
  }

  .read-overflow {
    max-height: 160px;
    overflow-y: hidden;
  }

  .read-open {
    background: linear-gradient(180deg, #ffffff, #e3ebf3);
    border-radius: 2px 2px 2px 2px;
    color: #2b63a1;
    font-size: 14px;
    text-align: center;
    padding-bottom: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &:hover {
      font-weight: bold;
    }

    .open-icon {
      display: flex;
      flex-direction: column;
    }
  }
</style>
